<template>
      <div :class="['container--item', 'animated',move]">
        <div class="container--item__header">
          <img src="../assets/register/left.png"
               class="container--img__left"
               @click="backPersonage"
               alt="#">
        </div>
        <div class="container--item__log">
          <img src="../assets/register/logo.png"
               class="container--img__login"
               alt="#">
        </div>
        <div class="container--item__text">
          <span class="container--item__login" @click="login"
          :style="{ 'color': index === 0? '#186fe3': '#000'}"
          >登录</span>
          <span class="container--item__personal" @click="personal"
                :style="{ 'color': index === 1? '#186fe3': '#000'}"
          >注册</span>
          <span class="container--item__act"
                :style="{'left': index === 0?'-4rem': '-.65rem'}"></span>
        </div>
        <router-view></router-view>
      </div>
</template>

<script>

export default {
  name: 'login',
  data() {
    return {
      move: 'fadeInRightBig',
      clickColor: false,
      index: 0,
    };
  },
  methods: {
    login() {
      this.index = 0;
      this.$router.push({ name: 'login' });
    },
    personal() {
      this.index = 1;
      this.$router.push({ name: 'register' });
    },
    backPersonage() {
      this.$router.push({ name: 'personal' });
      this.move = 'bounceOutRight';
    },
  },
  created() {
    this.$bus.$on('authLogin', () => {
      this.$router.push({ name: 'login' });
      this.index = 0;
    });
  },
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.animated{
  animation-duration: .3s;
}
.container--item{
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  .container--item__header{
    width: 100vw;
    .container--img__left{
      width: .5rem;
      height: .5rem;
      padding: .367rem;
    }
  }
  .container--item__log{
    position: relative;
    width: 100vw;
    height: 2.973333rem;
    .container--img__login{
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 1.04rem;
      height: 1.04rem;
    }
  }
  .container--item__text{
    width: 100vw;
    margin-bottom: 1rem;
    .container--item__login{
      text-align: right;
      width: 50vw;
      display: inline-block;
      font-size: .4rem;
      border-right: 2px solid #dddddd;
      padding-right: 1.24rem;
      box-sizing: border-box;
    }
    .container--item__personal{
      text-align: left;
      display: inline-block;
      font-size: .4rem;
      padding-left: 1.24rem;
    }
    .container--item__act{
      display: inline-block;
      transition: left .5s ease;
      width: .5rem;
      height: .08rem;
      border-radius: 30px;
      background-color: #186fe3;
      position: relative;
      left: -4rem;
      top: .25rem;
    }
  }
}
.auth-enter{
  left: 100vw;
}
.auth-enter-active{
  transition: left .5s;
}
.auth-leave-to {
  left: 0;
}
.auth-leave{
  left: 0;
}
.auth-leave-active{
  transition: left .5s;
}
.auth-leave-to{
  left: 100vw;
}
</style>
